<!DOCTYPE html>
<html lang="ZH-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="ajax.js"></script>
    <script src="jquery1.9/jquery-1.9.0.min.js"></script>
    <script src="template.js"></script>
    <style>
        .list>li {
            margin: 5px 0;
            padding: 10px 5px;
            cursor: pointer;
        }
        .list>li:hover {
            background-color: lightblue;
        }
        .info {
            width: 200px;
            border: 1px solid black;
            transition: all 0.5s;
        }
        .info * {
            margin: 5px;
        }
        .info img {
            width: 100px;
        }
        .info{
            display: none;
        }
        
    </style>
    <script>
        function show(id){
            // console.log(id);
            ajax({
                url: "./service/selectProductById.php",
                method: "post",
                data: "id=" + id,
                success: function(result) {
                    result = JSON.parse(result);
                    // console.log(result);
                    // document.querySelector("#show").innerHTML = 
                    // `<div>${result.p_id}</div>
                    // <div>${result.p_name}</div>
                    // <div>${result.p_price}</div>
                    // <div>${result.p_unit}</div>
                    // <div><img src="${result.p_image_url}" alt="no image"></div>`;
                    var html=template("template",result);
                    // 将模板放入#show中
                    document.getElementById("show").innerHTML=html;
                }
            });
        }
        function mousemove(e){
                var info=document.getElementsByClassName("info")[0];
                // console.log(info);
                info.style.position="absolute";
                info.style.display="block";
                info.style.top=e.clientY+2+"px";
                info.style.left=e.clientX+2+"px";
            // };
            
        };
        function mouseout(){
                info.style.display="none";
        }

        window.onload=function(){
            // let p2=$("#f").serializeArray();
            $.ajax({
                type: "post",
                url: "./service/selectProduct.php",
                data: null,
                dataType: "json"
            }).then((data, textStatus, jqXHR)=>{
                console.log('data:', data);
                var obj={
                    data1:data
                };
                console.log(obj);
                var html=template("templateli",obj);
                console.log("html:",html);
                document.getElementById("list").innerHTML=html;
            },(jqXHR, textStatus, errorThrown)=>{
                // console.log(jqXHR);
                // console.log(textStatus);
                // console.log(errorThrown);
            });
        }




    </script>
</head>
<body>
    <h3>商品列表</h3>
    <script id="templateli" type="text/html">
        {{each data1 product}}
        <li onmouseover='show({{product.p_id}})'>
            <span>{{product.p_name}}</span>
        </li>
            
        {{/each}}
    </script>

        <ul class="list" id="list" onmouseout="mouseout()" onmousemove="mousemove(event)">

        </ul>
    <hr>
    <!-- 模板 -->
    <script id="template" type="text/html">
        <div>{{p_id}}</div>
        <div>{{p_name}}</div>
        <div>{{p_price}}</div>
        <div>{{p_unit}}</div>
        {{if p_status==1}}
        <div>上架</div>
        {{/if}}
        {{if p_status==-1}}
        <div>下架</div>
        {{/if}}
        <div><img src="{{p_image_url}}" alt="no image"></div>
    </script>
    <div class="info" id="info">
        <h3>商品信息：</h3>
        <div id="show">

        </div>
    </div>
</body>
</html>